<template>
  <div id="publicTable" ref="publicTable"
       :style="{width:width==''?null:width+'px'}"
  >
       <el-table
         :data="tableData.records"
         ref="multipleTable"
         :max-height="tableHeight"
         border
         header-cell-class-name="tabHeaderClass"
         @row-click="rowClick"
         @row-dblclick="rowDblclick"
         style="width: 100%"
         >
         <!-- 多选 -->
        <el-table-column v-if="multiple" 
           type="selection"
           width="50">
         </el-table-column>
         <!-- 序号 -->
        <el-table-column  v-if="order"
           label="序号"
           type="index"
           width="50">
         </el-table-column>
         <!-- 表数据 -->
         
        

         <el-table-column v-for="(item,index) in columnDefs" :key="index" :show-overflow-tooltip="true"
           :prop="item.field"
           :label="item.headerName"
           :width="item.width?item.width:'200'">

           <template slot-scope="scope" >
             <span v-if="item.field=='createtime'">
                  {{scope.row[item.field] | dataFormat}}
             </span>
             <span v-else>
               {{scope.row[item.field]}}
             </span>
         </template>
         </el-table-column>

         <slot name="select"></slot>
         <slot name="select2"></slot>
         <slot name="select3"></slot>

         <slot name="input"></slot>
         <slot name="input2"></slot>
         <slot name="input3"></slot>

        <!-- 操作插槽按钮 -->

         <slot name="button"></slot>

        <!-- 操作按钮 -->
        <el-table-column  v-if="btn.length>0"
           label="操作"
           width="130"
           >
         <template slot-scope="scope" >
             <span v-for="(item,index) in btn" :key="index">
                 <i v-if="item=='enable'" @click="handleChange('2', scope.row)" class="flash-icon iconClass f-icon-jinzhi"></i>
                 <i v-if="item=='delete'" @click="handleChange('1', scope.row)" class="flash-icon iconClass f-icon-dui"></i>
                 <i v-if="item=='edit'"   @click="handleEdit(scope.$index, scope.row,true)" class="flash-icon iconClass f-icon-pen"></i>
                 <i v-if="item=='see'"   @click="handleEdit(scope.$index, scope.row,false)" class="flash-icon iconClass f-icon-chakan"></i>
                 <i v-if="item=='discard'"   @click="handleDelete(scope.$index,scope.row)" class="flash-icon iconClass f-icon-lajitong"></i>
                 <i v-if="item=='updata'"   @click="handleUpdata(scope.$index,scope.row)" class="flash-icon iconClass f-icon-shangchuan"></i>
                 <i v-if="item=='download'"   @click="handleDownload(scope.$index,scope.row)" class="flash-icon iconClass f-icon-xiazai"></i>
             </span>
         </template>
         </el-table-column>
       </el-table>
       <el-pagination
                 :current-page="currentPage"
                 background
                 :page-sizes="[100, 200, 300, 400]"
                 layout="prev, pager, next, sizes"
                 @size-change="sizeChange"
                 @prev-click="prevClick"
                 @next-click="nextClick"
                 @current-change="currentChange"
                 :total="tableData.totalSize"
                 :hide-on-single-page="tableData.totalSize==undefined?true:false"
                 >
       </el-pagination>

  </div>
</template>

<script>
import Vue from 'vue'
export default {
  props:{
      columnDefs:{   //表頭
          type:Array,
          default:[]
      },
      tableData:{    //數據
          default:()=>{[]}
      },
      multiple:{   //多选
         type:Boolean,
         default:false
      },
      width:{
         type:String,
         default:""
      },
       pageSize:{   //多选
         type:Number,
         default:100
      },
       currentPage:{   //多选
         type:Number,
         default:1
      },
      order:{     //序号
         type:Boolean,
         default:false
      },
      btn:{
          type:Array,
          default:()=>["delete","enable",'edit']
      }
  },
  components: {

  },
  filters:{
       dataFormat(data){
           return Vue.prototype.ChangeDateFormat(data,true)
       }
  },
  data() {
      return {
          tableHeight:"1000px",
          CurrentPageSize:100,
          currentPageNum:1
      }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {
    tableData(newVal,oldVal){
        this.tableData=newVal
    }
 },
  methods: {
      RowResize() {   //适配函数
        let publicHeaderHeight=document.getElementById("publicHeaderCSS")==null?0:document.getElementById("publicHeaderCSS").offsetHeight     //公共头部高度
        let publicSearchHeight=document.getElementById("publicSearch")==null?0:document.getElementById("publicSearch").offsetHeight                //公共搜索区域
        let bodyHeight=document.body.clientHeight                                          //当前页面高度
        let tableHeight=bodyHeight-publicHeaderHeight-publicSearchHeight-50   //表格的高度
        this.tableHeight=tableHeight+'px'               //表格的动态高度   
    },
      handleChange(index,row){    //改变状态   1启用  2禁用 
          this.$emit("handleChange",index,row)
      },
      handleEdit(index,row,flag){     //编辑   
          this.$emit("handleEdit",row,flag)
      },
      handleDelete(index,row,flag){     //编辑   
          this.$emit("handleDelete",row,index)
      },
      handleUpdata(index,row,flag){     //上传   
          this.$emit("handleUpdata",row,index)
      },
      handleDownload(index,row,flag){     //下载   
          this.$emit("handleDownload",row,index)
      },
      rowClick(row,column){   //单机
          this.$emit("rowClick",row) 
      },
     rowDblclick(row,column){   //双击
          this.$emit("rowClick",row)
      },
      getSelection(){          //多选情况下,获取当前选中行数据
          let data = this.$refs.multipleTable.selection;
          return data
      },
      getAllData(){          //获取表格所有数据
          let data = this.$refs.multipleTable.data;
          return data
      },
      sizeChange(pageSize){        //当前页数据发生改变时
            this.CurrentPageSize=pageSize
            this.$emit("changePage",this.CurrentPageSize,this.currentPageNum)
      },
      prevClick(pageNum){     //前进按钮
          this.currentPageNum=pageNum
          this.$emit("changePage",this.CurrentPageSize,this.currentPageNum)
      },
      nextClick(pageNum){    //退后按钮
          this.currentPageNum=pageNum
          this.$emit("changePage",this.CurrentPageSize,this.currentPageNum)
      },
      currentChange(pageNum){  //当前页发生改变时
          this.currentPageNum=pageNum
          this.$emit("changePage",this.CurrentPageSize,this.currentPageNum)
      },
  },
  created() {
       
  },
  mounted() {
      this.RowResize()
       window.onresize = () => {
            this.RowResize()
       }
       
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
  @import "../../styles/less/public.less";
  #publicTable{
  input{
      text-align: center;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #c2c2c2;
    border-radius: 10px;
    background-clip: content-box;
  }
::-webkit-scrollbar-track {
    background-color: #fafafa;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
 ::-webkit-scrollbar-thumb:hover {
            background: #696969;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
    margin-top: 12px;
    text-align: right;
}

}
  #publicTable{
      .publicBox()
  }
  #publicTable{
      .el-table__header{
          width: 100% !important;
          background-color: rgba(187, 187, 187, 1) !important;
      }
      thead tr .tabHeaderClass{
           color: rgba(16, 16, 16, 1);
           text-align: center;
           padding:0;
           line-height: 30px;
      }
     .tabHeaderClass:last-child{
          border-right:none;
      }
      .el-table .cell{
          text-align: center;
          line-height: 30px;
      }
      .el-table td, .el-table th{
          padding:0;
      }
      .el-table th:last-child{
           border-right: none;
           z-index: 99;
       }
      .el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper{
          background-color: rgba(238, 238, 238, 1);
          color: rgba(16, 16, 16, 1);
          text-align: center;
      }
      .el-table th, .el-table tr{
          background: transparent; 
      }
      .el-table td, .el-table th.is-leaf{
          border-color:#FDFDFD;
      }
      .el-table td:last-child{
          border-right: none;
      }
     .el-table th:nth-last-child(2){
          border-right: none;
      }
       
      .iconClass{
          cursor: pointer;
          margin-left: 5px;
          font-weight: 600;
      }
      .f-icon-dui{
          color: #0EEC10; 
      }
      .f-icon-jinzhi{
          color: #F70202; 
      }
      .f-icon-pen{
          color: #000000;
      }
  }
    
</style>